<template>
    <RouterView v-slot="{ Component }">
        <transition name="router">
            <component :is="Component" />
        </transition>
    </RouterView>
</template>
<script setup>

</script>
<style lang="scss">
* {
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
    display: none;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
    position: relative;
}

img {
    object-fit: cover;
}

body {
    overflow: hidden;
}

.gun {
    overflow: scroll;
    height: 100%;
}

.he {
    height: 100%;
}

.poa {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

input,
button {
    border: none;
    outline: unset;
    padding: none;
}

div {
    box-sizing: border-box;
}

ul {
    list-style: none;
}

.poa_center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.router-enter-active {
    animation: shadow 0.3s ease;
}

.router-leave-active {
    animation: shadow 0.3s ease reverse;
}

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>